<template>
    <el-card>

       <!-- 新增|刷新 -->
       <ListHeader @create="handleCreate" @refresh="getData"/>
   
       <el-table :data="tableData"  v-loading="loading">
         <el-table-column prop="id" label="序號" />
         <el-table-column prop="name" label="優惠券名稱" :show-overflow-tooltip="true" />
        
         <el-table-column  label="优惠類型" :show-overflow-tooltip="true" >
          <template #default="{row}">
            {{
            row.type == 10
              ? "满减" 
              : row.type == 20
              ? "满折" 
              : row.type == 30
              ? "立减" 
              : "立折" 
          }}
          
          </template>
        </el-table-column>
        
         <el-table-column prop="money" label="折扣/优惠额" :show-overflow-tooltip="true" />
         <el-table-column prop="integral" label="兌換所需積分"  />  
        
         <el-table-column prop="start_time" label="開始時間"  />
         <el-table-column prop="end_time" label="結束時間"  />
    
         <el-table-column label="操作" width="180" align="center">
           <template #default="scope">
             
            
               <el-button type="primary" size="small"  @click="handleEdit(scope.row)">修改</el-button>
   
             <el-popconfirm title="是否要删除？" confirmButtonText="確認" cancelButtonText="取消" @confirm="handleDelete(scope.row.id)">
                   <template #reference>
                       <el-button type="danger" size="small">删除</el-button>
                   </template>
               </el-popconfirm>
             
           </template>
         </el-table-column>
         
       </el-table>
   
       <div class="flex items-center justify-center mt-5">
           <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage" :page-size="limit" @current-change="getData"/>
       </div>
   
       <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
         <el-form :model="form" ref="formRef" :rules="rules" label-width="110px" :inline="false">
          <el-form-item label="優惠券名稱" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

       
        <el-form-item label="類型">
          <el-radio-group v-model="form.type" prop="type">
            <el-radio :label="10" border size="default">滿減</el-radio>
            <el-radio :label="20" border size="default">滿折</el-radio>
            <el-radio :label="40" border size="default">立折</el-radio>
            <el-radio :label="30" border size="default">立減</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="活動時間" prop="start_time">
          <el-date-picker
            v-model="timerange"
            :editable="false"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="To"
            start-placeholder="開始時間"
            end-placeholder="結束時間"
          />
        </el-form-item>

        <el-form-item label="折扣金额" prop="money">
          <el-input v-model="form.money" type="number" placeholder="面值" style="width: 50%;">
            <template #append>{{ form.type ==20 ?'折': form.type==30 ?'折':'元' }}</template>
          </el-input>
        </el-form-item>

        <el-form-item label="满足金额" prop="condition" v-if="form.type==10 || form.type==20 ">
          <el-input type="number" v-model="form.condition" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="兌換所需積分" prop="integral">
          <el-input v-model="form.integral" type="number" style="width: 50%;" />
        </el-form-item>

        <el-form-item label="庫存" >
          <el-input-number v-model="form.stock" :min="1" />
        </el-form-item>

        <el-form-item label="使用說明" >
          <el-input v-model="form.desc" type="textarea" :rows="5"/>
        </el-form-item>
         
         </el-form>
       </FormDrawer>
    </el-card>
   </template>
   
    <script setup>
   import { computed } from "vue"
   import ListHeader from "@/components/ListHeader.vue";
   import FormDrawer from "@/components/FormDrawer.vue";
   import { useInitTable,useInitForm } from '@/composables/useCommon.js'
   
   import {
     getcoupon,
     del,
     update,
     create
   } from "@/api/coupon.js"
 
   const {
     tableData,
     loading,
     currentPage,
     total,
     limit,
     getData,
     handleDelete
   } = useInitTable({
     getList:getcoupon,
     delete:del,
    
   })
   
   const {
     formDrawerRef,
     formRef,
     form,
     rules,
     drawerTitle,
     handleSubmit,
     handleCreate,
     handleEdit
   } = useInitForm({
     form:{
         name: "",
         type: 10,
         start_time:'',
         end_time:'',
         desc:"",
         money:'',
         integral:0,
         condition:"" 

     },
     rules: {
    name: [{required: true,message: '優惠券名稱不能為空',trigger: 'blur'}],
    start_time: [{required: true,message: '開始時間不能為空',trigger: 'blur'}],
    end_time: [{required: true,message: '結束時間不能為空',trigger: 'blur'}],
    money: [{required: true,message: '金額不能為空',trigger: 'blur'}],
    integral: [{required: true,message: '兌換積分不能為空',trigger: 'blur'}],
    condition: [{required: true,message: '兌換條件不能為空',trigger: 'blur'}],
  },
     getData,
     update:update,
     create:create,
     beforeSubmit: (f) => {
    if (typeof f.start_time != Number) {
      f.start_time = new Date(f.start_time).getTime() / 1000;
    }
    if (typeof f.end_time != Number) {
      f.end_time = new Date(f.end_time).getTime() / 1000;
    }
    return f;
  },
   })

   const timerange = computed({
  get() {
    return form.start_time && form.end_time
      ? [form.start_time, form.end_time]
      : [];
  },
  set(val) {
    form.start_time = val[0];
    form.end_time = val[1];
  },
});
   </script>
   
   